<template>
  <app-home>
    <div slot="main">
      <Button type="default" @click="removeMany()">删除多个</Button>
      <Button @click="handleSelectAll(false)">取消全选</Button>
      <Table border :columns="columns" :data="rows" ref="selection"></Table>
      <Page
        :total="total"
        show-sizer
        :page-size-opts="[1,5,10]"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
      />
    </div>
  </app-home>
</template>


<script>
import moment from "moment"; //设置时间格式
import Home from "@/views/home";

export default {
  components: {
    "app-home": Home
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "标题",
          key: "title",
          width: 100
        },
        {
          title: "关键字",
          key: "keywords"
        },
        {
          title: "作者",
          key: "author"
        },
        {
          title: "类型",
          key: "news_type"
        },
        {
          title: "描述",
          key: "describe"
        },
        {
          title: "评论数量",
          key: "comment_num",
          width: 50
        },
        {
          title: "火热程度",
          key: "hot",
          width: 80
        },
        {
          title: "发布时间",
          key: "pro_data",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "date"
                }
              }),
              h("div", moment(params.row.pro_data).format("YYYY-MM-DD"))
            ]);
          }
        },
        {
          title: "转载地址",
          key: "tips_source"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "View"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "Delete"
              )
            ]);
          }
        }
      ],
      rows: [],
      total: 3,
      page: 1,
      limit: 10
    };
  },
  methods: {
    removeMany() {
        console.log(this.rows)
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    show(index) {
      this.$Modal.info({
        width: 600,
        title: "News Info",
        content: `标题：${index.title}<br>作者：${
          index.author
        }<br>发布日期：${moment(index.pro_data).format("YYYY-MM-DD")}<br/>
        新闻类型:${index.news_type}<br/>描述：${index.describe}<br/>评论数量：${
          index.comment_num
        }<br/>新闻内容：${index.content}<br/>
        火热程度：${index.hot}<br/>转载地址：${index.tips_source}`
      });
    },
    remove(row) {
      this.$Modal.confirm({
        title: "确认删除? ",
        content: "<p>请问你确认删除该记录吗?</p>",
        onOk: () => {
          newsDelete(row._id);
          this.$Message.info("Clicked ok");
          this.getList();
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    getList() {
      this.$store
        .dispatch("newsList", { page: this.page, limit: this.limit })
        .then(() => {
          this.rows = this.$store.state.news.data.rows;
        });
    },
    onPageChange(page) {
      this.page = page;
      this.getList();
    },
    onPageSizeChange(pageSize) {
      this.limit = pageSize;
      //console.log(pageSize);
      this.getList();
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
